<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{user.page.tile}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        function resizePageSize(){
            _gridWidth = $(document).width()-3;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-31-28; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-40)/4;
            $("#user-manger-table-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/user/getUserInfolistByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.nick}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true

            });
            $("#user-manger-table-id").flexReload();
            $("#query-btn-id").click(function (event) {
               var searchUserName =  $("#search-user-name-id").val();
                event.stopPropagation();
                $("#user-manger-table-id").flexOptions({
                    extParam:[{name:"searchUserName",value:searchUserName}]
                }).flexReload();
            });
            $("#user-detail-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.detail.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#allow-role-btn-id").click(function (event) {
                event.stopPropagation();
                loadRoleList();


            });

            $("#allow-role-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.role.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleIds = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("role-list-ztree-id");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            var userId=$("#user-manger-table-id").attr("userId");
                            $(nodes).each(function (index,item) {
                                roleIds.push(item.id);
                            });
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/user/saveRefRoleIdByUserId}]]*/'',
                                data: [
                                    {name:"roleIds",value:roleIds},
                                    {name:"userId",value:userId}
                                    ],
                                success: function (data) {
                                    message(data.msg);
                                    $("#allow-role-dialog-id").dialog( "close" );

                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/);
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });



        });//ready
        function rowDbclick(r) {
            $(r).dblclick(function (event) {
                var colVue = $(r).attr("ch").split('_FG$SP_');
                console.info(colVue);
                $("#re-user-uuid-id").text(colVue[0]);
                $("#re-user-name-id").text(colVue[1]);
                $("#re-user-mobile-id").text(colVue[4]);
                $("#re-user-nick-id").text(colVue[6]);
                $("#user-detail-dialog-id").dialog('open');
            });
        }
        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        function loadRoleList() {

            var ids =  $("#user-manger-table-id").getFlexigridiAttrByIndex(0);
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/);
                return;
            };
            $("#user-manger-table-id").attr("userId",ids);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/user/queryroleZtreeList}]]*/'',
                data: [{name:"userUuid",value:ids[0]}],
                success: function (data) {
                    $.fn.zTree.init($("#role-list-ztree-id"), allocateSetting, data);
                    $("#allow-role-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/);
                }
            });
        }
    </script>
</head>
<body>
<nav>
    <span th:text="#{user.name}"></span> <input type="text" id="search-user-name-id">
    <a sec:authorize="hasRole('ROLE_cldk_data_user_query')" id="query-btn-id" href="#" class="btn-sm">
        <i class="glyphicon glyphicon-search"></i>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_user_role')" id="allow-role-btn-id" href="#" class="btn-sm">
        <i class="glyphicon glyphicon-wrench"></i>
    </a>


</nav>

<table id="user-manger-table-id"></table>
<div id="user-detail-dialog-id" style="display: none">
    <div class="form-group">
        <span th:text="#{user.uuid}"></span>
        <span class="form-control" id="re-user-uuid-id"></span>
    </div>
    <div class="form-group">
        <span th:text="#{user.name}"></span>
        <span class="form-control" id="re-user-name-id"></span>
    </div>
    <div class="form-group">
        <span th:text="#{user.mobile}"></span>
        <span class="form-control"  id="re-user-mobile-id"></span>
    </div>
    <div class="form-group">
        <span th:text="#{user.nick}"></span>
        <span class="form-control" id="re-user-nick-id"></span>
    </div>
</div>

<div id="allow-role-dialog-id" style="display: none">
    <ul id="role-list-ztree-id" class="ztree"></ul>
</div>
</body>
</html>
